<template>
  <view>
    <!-- 1 搜索框 -->
    <UgoSearch></UgoSearch>
    <!-- 1 搜索框 -->

    <!-- 2 轮播图 -->
    <u-swiper height="340" :list="swiperdata" name="image_src"></u-swiper>
    <!-- 2 轮播图 -->

    <!-- 3 导航 -->
    <view class="catitems u-flex">
      <navigator
        class="u-flex-1 u-p-20"
        v-for="item in catitems"
        :key="item.name"
      >
        <!-- 

         u-image  
         1 设置一个高度
         2 或者设置 mode="widthFix" 高度自适应
         3 给它的父元素设置一个高  让 u-image  继承下来 
         -->
        <u-image mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>
    <!-- 3 导航 -->

    <!-- 4 楼层  -->
    <view class="floordata">
      <!-- 4.1 第一层循环 -->
      <view
        class="floor-group"
        v-for="item1 in floordata"
        :key="item1.floor_title.name"
      >
        <!-- 4.1.1 标题 -->
        <view class="floor-group-title">
          <u-image mode="widthFix" :src="item1.floor_title.image_src"></u-image>
        </view>
        <!-- 4.1.1 标题 -->

        <!-- 4.1.2 内容 -->
        <view class="floor-group-list">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image
              mode="scaleToFill"
              height="100%"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>

        <!-- 4.1.2 内容 -->
      </view>
      <!-- 4.1 第一层循环 -->
    </view>
    <!-- 4 楼层  -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperdata: [],
      // 导航数据
      catitems: [],
      // 楼层数据
      floordata: [],
    };
  },
  onLoad() {
    // 获取轮播图数据
    this.getSwiperData();
    // 获取导航数据;
    this.getCatitems();
    // 获取楼层数据
    this.getFloordata();
  },
  methods: {
    // 获取轮播图数据
    async getSwiperData() {
      // 使用uni api 来获取
      const [err, result] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      });
      // console.log(result);
      // 常规做法 自己修改数据结构
      this.swiperdata = result.data.message;
    },

    // 获取导航数据
    async getCatitems() {
      const [err, result] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      });
      this.catitems = result.data.message;
    },
    // 获取楼层数据
    async getFloordata() {
      const [err, result] = await uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      });
      this.floordata = result.data.message;
    },
  },
};
</script>

<style lang="scss">
// .catitems {   使用一下 uview提供的内置样式来实现
//   display: flex;
//   navigator {
//     flex: 1;
//     padding: 20rpx;
//   }
// }

.floor-group-list {
  // 子元素使用了浮动
  // 父元素 清除浮动
  overflow: hidden;
  navigator {
    // 750rpx
    width: 250rpx;
    float: left;
    margin-left: 13rpx;

    // 5张图片对应的高度
    width: 233rpx;
    height: 188rpx;
  }
  // 第一个导航标签
  navigator:first-child {
    width: 232rpx;
    height: 386rpx;
  }
  // 后两个 导航标签
  navigator:nth-last-child(-n + 2) {
    margin-top: 13rpx;
  }
}
</style>
